<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>获取图片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<script language="javascript">
</script>
<!--表单提交-->
<section>
    <h1>获取帖子内图片</h1>

    <form action="/getImages" method="post">
        <div class="form-group">
            <input type="text" id="basic-form-first-name" name="postAdds" placeholder="帖子的分享链接">
            <label for="basic-form-first-name">链接</label>
        </div>
        <div class="form-group">
            <input type="text" id="basic-form-last-name" name="floor" placeholder="需要获取的楼层数，为0获取全部">
            <label for="basic-form-last-name">楼层</label>
        </div>
        <!--<div class="form-group">
            <input type="email" id="basic-form-email" name="classl" placeholder="输入一个有效的电子邮件地址">
            <label for="basic-form-email">输入一个有效的电子邮件地址<span class="error">输入一个有效的电子邮件地址</span></label>
        </div>-->
        <button id="basic-form-submit" type="button">获取图片</button>

        <div id="jsonDiv" class="form-group" style="display:none;width: 20.5rem; height: 15rem;">
            <textarea id="jsonView" style="width:100%;height:100%;"></textarea>
        </div>
    </form>
</section>
</body>
<script>
    $("#basic-form-submit").click(function () {
        var param={"postAdds":""+$("#basic-form-first-name").val()+"","floor":$("#basic-form-last-name").val()};
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/getImages",
            //数据，json字符串
            data : JSON.stringify(param),
            //请求成功
            success : function(result) {
                console.log(result);
                //显示div
                $("#jsonDiv").css('display','block');
                $("#jsonView").val(JSON.stringify(result, null, '\t'));
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });

    function jsonView() {

        try {
            var input = eval('(' + $('#original').val() + ')');
        } catch (error) {
            return alert("Cannot eval JSON: " + error);
        }

        $('#original').hide();
        $('#json-renderer').show();

        $('#btn-json-viewer').hide();
        $('#btn-json-viewer1').show();

        $('#json-renderer').jsonViewer(input, {collapsed: false, withQuotes: true});

    }

</script>


</html>
